{% extends 'base.html' %}
{% block title %}用户登录{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">系统登录</h4>
            </div>
            <div class="card-body">
                <!-- 错误提示 -->
                {% if error %}
                    <div class="alert alert-danger">{{ error }}</div>
                {% endif %}

                <form id="loginForm" method="post" action="{% url 'admin_home' %}">
                    {% csrf_token %}

                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" required name="username"
                               pattern="^[a-zA-Z0-9]{4,20}$"
                               title="用户名只能包含字母、数字，长度为4-20个字符">
                        <div class="invalid-feedback">
                            用户名格式不正确（4-20位字母或数字）
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" required name="password"
                               pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$"
                               title="密码必须包含字母和数字，长度为6-20个字符">
                        <div class="invalid-feedback">
                            密码格式不正确（需包含字母和数字，6-20位）
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100">立即登录</button>

                    <p class="text-center text-muted small mt-2">
                        没有账号？<a href="{% url 'register' %}" class="text-primary">请点击</a>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // 表单验证逻辑
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('loginForm');

        // 自定义验证
        form.addEventListener('submit', function(event) {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 用户名正则：4-20位字母或数字
            const usernameRegex = /^[a-zA-Z0-9]{4,20}$/;
            // 密码正则：必须包含字母和数字，6-20位
            const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;

            let isValid = true;

            if (!usernameRegex.test(username)) {
                document.getElementById('username').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('username').classList.remove('is-invalid');
            }

            if (!passwordRegex.test(password)) {
                document.getElementById('password').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('password').classList.remove('is-invalid');
            }

            if (!isValid) {
                event.preventDefault(); // 阻止表单提交
            }
        });

        // 输入时移除错误提示
        document.getElementById('username').addEventListener('input', function() {
            this.classList.remove('is-invalid');
        });

        document.getElementById('password').addEventListener('input', function() {
            this.classList.remove('is-invalid');
        });
    });
</script>
{% endblock %}